<template>
  <div>
    <div class="title bor-b-e9e9e9">
      <figure class="img1 flex_c_c_c">
      <img :src="info.url" alt="" style="width:100%;border-radius:40px;">
      </figure>
      <!-- <img :src="info.url" alt="" class="img1"> -->
      <div class="title_right">
        <ul class="f_c_34">{{info.name}}</ul>
        <ul class="c_98">所属公司:{{info_com}}</ul>
        <ul class="c_98">职位:{{info.job}}</ul>
        <ul class="c_98">电话:{{info.phone}}</ul>
      </div>
    </div>
    <div class="card" @click="wechat">
      <ul>{{info.name}}的名片</ul>
      <ul>
        <i class="iconfont icon-erweima i_f_42"></i>
        <i class="iconfont icon-arr-right i_f_32"></i>
      </ul>
    </div>
    <p style="height:10px;width:100vw;"></p>
    <cmpTabs @F_GetTabsIndex="F_GetTabsIndex" :tabs="tabs"></cmpTabs>

    <per_del_1 v-show="perIndex == 0" :ranking="ranking" :radarData="radarData" :id="info.id"></per_del_1>

    <per_del_2 v-show="perIndex == 1" :id="info.id"></per_del_2>

    <per_del_3 v-show="perIndex == 2" class="per_del_3" :lists="per_del_3_list"></per_del_3>

    <per_del_4 v-show="perIndex == 3" class="per_del_4" :lists="per_del_4_list"></per_del_4>
  </div>
</template>

<script>
import Common from "../assets/js/common.js";
let Mycommon = new Common();

import cmpTabs from "./common/index_tabs.vue";
import per_del_1 from "./common/per_del_1.vue";
import per_del_2 from "./common/per_del_2.vue";
import per_del_3 from "./common/per_del_3.vue";
import per_del_4 from "./common/per_del_4.vue";

export default {
  components: { cmpTabs, per_del_1, per_del_2, per_del_3, per_del_4 },
  data() {
    return {
      tabs: ["雷达能力图", "数据分析", "客户互动", "TA的跟进"],
      perIndex: 0,
      page: 1,
      total_page: "",
      per_del_3_list: [],
      per_del_4_list:[],
      radarData:[]
    };
  },
  created() {
    let aa = {
      info: {
        name: "敬水仙",
        url:
          "http://longbingcard.xiaochengxucms.com/images/2/2018/09/XH8a4xhL48T8rW6HVV6Ltl9tRU10tG.png",
        job: "总经理",
        id: "3",
        phone: "15680635005"
      },
      data: {
        title: [
          { text: "获客能力值", color: "#e93636", max: 659 },
          { text: "个人魅力值", color: "#e93636", max: 659 },
          { text: "客户互动值", color: "#e93636", max: 659 },
          { text: "产品推广值", color: "#e93636", max: 659 },
          { text: "官网推广度", color: "#e93636", max: 659 },
          { text: "销售主动性值", color: "#e93636", max: 659 }
        ],
        datas: [129, 559, 54, 0, 214, 54]
      },
      info_com: "龙兵科技",
      index: "1"
    };
    let params = this.$route.params
    this.info = params.info;
    this.info_com = params.info_com;
    this.ranking = params.index;
    this.radarData = params.data;

    // console.log(this.radarData)
  },
  computed:{
    user_id(){
      return this.$store.state.id
    }
  },
  mounted() {
    // this.id = this.$route.params.id || "3";
    this.onReachBottom();
  },
  methods: {
    F_GetTabsIndex(index) {
      this.perIndex = index;
      this.page = 1;
      this.per_del_3_list =  [],
      this.per_del_4_list = []
      if (this.perIndex == 2) {
        this.clientViewData();
      }else if(this.perIndex == 3){
         this.followListData();
      }
    },
    wechat(){
      wx.miniProgram.navigateTo({url: '/longbing_card/pages/index/index'})
    },
    //判断滑动触底
    onReachBottom() {
      let that = this;
      let div = document.getElementsByClassName("per_del_3")[0];
      div.addEventListener("scroll", function(e) {
        let height = div.clientHeight + div.scrollTop + 30;
        if (height > div.scrollHeight) {
          if (that.perIndex == 2) {
            that.page++;
            that.clientViewData(that.page);
          }
        }
      });
      let div4 = document.getElementsByClassName("per_del_4")[0];
      div4.addEventListener("scroll", function(e) {
        let height = div4.clientHeight + div4.scrollTop + 30;
        if (height > div4.scrollHeight) {
          if (that.perIndex == 3) {
            // that.page++;
            // that.clientViewData(that.page);
          }
        }
      });
    },
    clientViewData(page) {
      let that = this;
      // let id = sessionStorage.getItem("userId");

      let pages = page || that.page;
      let data = {
        user_id: that.user_id,
        staff_id: this.info.id,
        page: pages
      };
      let url = "aiTime";
      Mycommon.http({
        url: url,
        data: data,
        success(res) {
          // console.log(res)
          let resList = res.data.data.list;
          that.total_page = res.data.data.total_page;
          resList.forEach(val => {
            val.create_time = Mycommon.dates(val.create_time);
            val.url =
              val.user.avatarUrl ||
              "http://pb14gmv45.bkt.clouddn.com/images/12/2018/09/dJJl8rANdVklRvo2RRDl8dMJnmlNlD.png";
            if (val.sign == "praise") {
              val.signdata = {};
              if (val.type == "1") {
                val.signdata.val1 = "语音点赞";
              } else if (val.type == "2") {
                val.signdata.val1 = "查看了你的信息";
              } else if (val.type == "3") {
                val.signdata.val1 = "对官网点赞了";
              } else if (val.type == "4") {
                val.signdata.val1 = "进行了分享操作";
              }
            } else if (val.sign == "view") {
              val.viewdata = {};
              if (val.type == "1") {
                val.viewdata.val1 = "浏览商城列表";
              } else if (val.type == "2") {
                val.viewdata.val1 = "浏览商品详情";
              } else if (val.type == "3") {
                val.viewdata.val1 = "浏览动态列表";
              } else if (val.type == "4") {
                val.viewdata.val1 = "点赞动态";
              } else if (val.type == "5") {
                val.viewdata.val1 = "动态留言";
              } else if (val.type == "6") {
                val.viewdata.val1 = "浏览公司官网";
              } else if (val.type == "7") {
                val.viewdata.val1 = "浏览动态详情";
              }
            } else if (val.sign == "copy") {
              val.copydata = {};
              if (val.type == "1") {
                val.copydata.val1 = "同步到通讯录";
              } else if (val.type == "2") {
                val.copydata.val1 = "拨打手机号";
              } else if (val.type == "3") {
                val.copydata.val1 = "拨打座机号";
              } else if (val.type == "4") {
                val.copydata.val1 = "复制微信";
              } else if (val.type == "5") {
                val.copydata.val1 = "复制邮箱";
              } else if (val.type == "6") {
                val.copydata.val1 = "复制公司名";
              } else if (val.type == "7") {
                val.copydata.val1 = "查看定位";
              } else if (val.type == "8") {
                val.copydata.val1 = "咨询产品";
              } else if (val.type == "9") {
                val.copydata.val1 = "播放语音";
              }
            }
          });

          if (that.per_del_3_list[0]) {
            resList.forEach(val => {
              that.per_del_3_list.push(val);
            });
          } else {
            that.per_del_3_list = resList;
          }
          // console.log(that.per_del_3_list)
        }
      });
    },
    followListData(page) {
      let that = this;
      let pages = page || that.page;
      let data = {
        staff_id: this.info.id,
        page: pages
      };
      let url = "followList";
      Mycommon.http({
        url: url,
        data: data,
        success(res) {
          // console.log(res)
          let resList = res.data.data.list;
          that.total_page = res.data.data.total_page;
          resList.forEach(val => {
            val.create_time = Mycommon.dates(val.create_time);
            val.url = that.info.url
            // if (val.sign == "praise") {
            //   val.signdata = {};
            //   if (val.type == "1") {
            //     val.signdata.val1 = "语音点赞";
            //   } else if (val.type == "2") {
            //     val.signdata.val1 = "查看了你的信息";
            //   } else if (val.type == "3") {
            //     val.signdata.val1 = "对官网点赞了";
            //   } else if (val.type == "4") {
            //     val.signdata.val1 = "进行了分享操作";
            //   }
            // } else if (val.sign == "view") {
            //   val.viewdata = {};
            //   if (val.type == "1") {
            //     val.viewdata.val1 = "浏览商城列表";
            //   } else if (val.type == "2") {
            //     val.viewdata.val1 = "浏览商品详情";
            //   } else if (val.type == "3") {
            //     val.viewdata.val1 = "浏览动态列表";
            //   } else if (val.type == "4") {
            //     val.viewdata.val1 = "点赞动态";
            //   } else if (val.type == "5") {
            //     val.viewdata.val1 = "动态留言";
            //   } else if (val.type == "6") {
            //     val.viewdata.val1 = "浏览公司官网";
            //   } else if (val.type == "7") {
            //     val.viewdata.val1 = "浏览动态详情";
            //   }
            // } else if (val.sign == "copy") {
            //   val.copydata = {};
            //   if (val.type == "1") {
            //     val.copydata.val1 = "同步到通讯录";
            //   } else if (val.type == "2") {
            //     val.copydata.val1 = "拨打手机号";
            //   } else if (val.type == "3") {
            //     val.copydata.val1 = "拨打座机号";
            //   } else if (val.type == "4") {
            //     val.copydata.val1 = "复制微信";
            //   } else if (val.type == "5") {
            //     val.copydata.val1 = "复制邮箱";
            //   } else if (val.type == "6") {
            //     val.copydata.val1 = "复制公司名";
            //   } else if (val.type == "7") {
            //     val.copydata.val1 = "查看定位";
            //   } else if (val.type == "8") {
            //     val.copydata.val1 = "咨询产品";
            //   } else if (val.type == "9") {
            //     val.copydata.val1 = "播放语音";
            //   }
            // }
          });

          if (that.per_del_4_list[0]) {
            resList.forEach(val => {
              that.per_del_4_list.push(val);
            });
          } else {
            that.per_del_4_list = resList;
          }
          console.log(that.per_del_4_list)
        }
      });
    }
    
  }
};
</script>

<style scoped>
.title {
  width: 100vw;
  height: 240px;
  background: #fff;
  display: flex;
  align-items: center;
}
.img1 {
  width: 160px;
  height: 160px;
  margin: 0 20px 30px 20px;
  border-radius: 80px;
}
.f_c_34 {
  font-size: 28px;
}
.c_98 {
  color: #989898;
}
.i_f_42 {
  font-size: 42px;
  color: #b2b2b2;
  padding: 0 10px;
}
.i_f_32 {
  font-size: 32px;
  color: #c7c7cc;
}
.title_right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.card {
  width: 96vw;
  height: 100px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 2vw 0 2vw;
  align-items: center;
}
</style>
